<template>
    <div class=" login">
        <div class="hidden"></div>
        <div class="see">
            <div class="middle ">
                <div>
                    <img src="~@/assets/img/my/logo.png" alt="">
                </div>
                <p>FITNESS</p>
            </div>
            <div class="bottom">
                <form @submit.prevent="login" ref="form" style="display:none" action="">
                    <div class="input">
                        <span>账号</span>
                        <input v-model="model.username" type="text" name="phone" placeholder="请输入账号">
                    </div>
                    <div class="input">
                        <span>密码</span>
                        <input @keyup="login" v-model="model.password" type="text" maxlength="6" name="code" placeholder="请输入密码">
                    </div>
                    <p>登录即示同意 <span>《OMINI健身用户协议》</span></p>
                </form>
                <button ref="button" @click="showLogin">手机号登录</button>
                <div ref="box" class="box">
                    <div ref="text" class="text">
                        <i></i>
                        <span>第三方平台登录</span>
                        <i></i>
                    </div>
                    <div ref="icon" class="icon">
                        <div>
                            <img src="~@/assets/img/my/login-1.png" alt="">
                        </div>
                        <img src="~@/assets/img/my/login-2.png" alt="">
                        <img src="~@/assets/img/my/login-3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
          return{
              model:{}
          }
        },
        methods: {
            async showLogin() {
                this.$refs.text.style.transform = 'translateY(0.6rem)'
                this.$refs.text.style.opacity = 0
                this.$refs.button.style.transform = 'translateY(1.2rem)'
                this.$refs.icon.style.display = 'none'
                this.$refs.box.style.height = '0.2rem'
                this.$refs.box.style.transform = 'translateY(0.5rem)'
                setTimeout(() => {
                    this.$refs.button.textContent = '登录'
                    this.$refs.text.style.display = 'block'
                    this.$refs.text.style.transition = 'all .5s'
                    this.$refs.text.style.opacity = 1
                    this.$refs.form.style.display = 'block'
                    this.$refs.form.style.opacity = 1
                    this.$refs.button.addEventListener('click',this.login)
                }, 500)
            },
            sleep(n) {
                let t = new Date().getTime() + n
                while (true) {
                    if (new Date().getTime() > t) return
                }
            },
            async login(){
                if (!this.model.username){
                    alert('请输入用户名')
                    return
                }
                if (!this.model.password){
                    alert('请输入密码')
                    return
                }
                const res=await this.$http.post('/login',this.model)
                if (res.data==='登录成功'){
                    this.$router.push('/one')
                    alert('登录成功')
                }

            },
        },
    }
</script>

<style lang="stylus" scoped>
    .login
        padding-top 0.01rem
        height 100vh
        width 100vw
        background url("~@/assets/img/my/women.jpeg") -330px no-repeat
        background-size 250% 100%
        position relative

        .see
            position absolute
            top 0
            left 0
            z-index 2

            .bottom
                position relative

                form
                    transition all .5s
                    position absolute
                    margin 0.5rem 0 0 0.4rem

                    p
                        color #cccccc
                        margin-left 0.1rem
                        font-size 0.13rem
                        margin-top 0.06rem

                        span
                            color #6B5CEB

                    .input
                        position relative

                        span
                            position absolute
                            left 0.2rem
                            top 0.3rem
                            color #ffffff

                        input
                            color #ffffff
                            padding 0 0.25rem 0 0.4rem
                            text-indent 0.3rem
                            width 3rem
                            height 0.4rem
                            border-radius 0.2rem
                            background-color transparent
                            border 1px solid #ffffff
                            margin-top 0.2rem

                            &::placeholder
                                color #cccccc
                                font-size 0.13rem

                .icon
                    margin-top 0.2rem
                    text-align center
                    padding-left 0.35rem

                    img
                        padding-left 0.1rem
                        padding-right 0.4rem

                    > div
                        display inline-block
                        position relative

                        &::after
                            content ""
                            position absolute
                            top 0
                            left 0.03rem
                            border-radius 50%
                            border 1px solid #ffffff
                            width 0.28rem
                            height 0.28rem

                button
                    margin-left 0.4rem
                    transition all .6s
                    outline none
                    border none
                    margin-top 1rem
                    background-image linear-gradient(to right, #6C5DEC, #8B7CF4)
                    color #ffffff
                    font-weight 800
                    font-size 0.14rem
                    width 3rem
                    height 0.4rem
                    border-radius 0.2rem

                .box
                    margin-left 0.4rem
                    position absolute

                    .text
                        margin-top 0.2rem
                        vertical-align center
                        line-height 0.25rem

                        span
                            color #ffffff
                            font-size 0.13rem
                            vertical-align middle

                        i
                            display inline-block
                            height 0.02rem
                            width 0.85rem
                            background-color #ffffff

                            &:nth-child(1)
                                margin-right 0.18rem

                            &:nth-child(3)
                                margin-left 0.2rem

            .middle
                margin-top 1.6rem
                margin-left 1.2rem
                position: relative;

                img
                    margin-left 0.12rem
                    transform rotate(-180deg)

                p
                    font-size 0.36rem
                    font-weight 600
                    color #6B5CEB

        .hidden
            position absolute
            width 100vw
            height 100vh
            top 0
            left 0
            background-color black
            opacity 0.4
            z-index 1
</style>